<template>
  <section class="small-title">
    {{title}}
    <span style="font-size: 50%">
      {{unit}}
    </span>
    <span class="op" v-if="showOp">操作</span>
    <slot></slot>
  </section>
</template>

<script>
  export default {
    name: 'SmallTitle',
    props: {
      title: {
        type: String,
        default: '标题'
      },
      unit: {
        type: String,
        default: ''
      },
      showOp: {
        type: Boolean,
        default: false
      }
    }
  }
</script>

<style scoped>
.small-title {
  width: 100%;
  height: .36rem;
  background-image: url("~@/assets/image/base/small_title.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /*background-image: linear-gradient(270deg, rgba(65,139,194,0) 0%, rgba(65,139,194,0.5) 100%);*/
  text-align: left;
  line-height: .42rem;
  font-family: FZZongYi-M05;
  font-size: .22rem;
  color: #FFFFFF;
  letter-spacing: 0;
  text-indent: .3rem;
  position: relative;
}
  .op {
    float: right;
    margin:0 .2rem;
    cursor: pointer;
  }
</style>
